<template>
  <div :class="{ menuItem: items.level == 1 }">
    <template v-if="items.Children">
      <el-submenu :index="items.id" popper-append-to-body v-if="items.name != '人力资源' && items.name != '考勤管理' && items.name != '系统管理' && items.name != '审批报销'">
        <template slot="title">
          <i class="iconfont" v-html="items.iconcls"></i>
          <span slot="title" class="navWords">{{ items.name }}</span>
        </template>
        <template v-for="item in items.Children">
          <el-menu-item v-if="!item.Children" :class="{ itemStyleBack: islBack }" :index="item.request" :key="item.id" @click="getThisPageActionId(item)">
            <span>{{ item.name }}</span>
          </el-menu-item>
          <sideMeunItem class="menuItem1" :class="{ itStyleBack: islBack }" v-else :items="item" :key="item.id"> </sideMeunItem>
        </template>
      </el-submenu>
      <el-popover v-else placement="right-start" trigger="hover" v-model="showPopover" ref="popoName" popper-class="down-popover" @show="onshow(items)">
        <div slot="reference" :class="islBack ? 'mxsyle' : 'mxsyleless'" ref="refName">
          <i class="iconfont" v-html="items.iconcls"></i>
          <span slot="title" class="navWords">{{ items.name }}</span>
        </div>
        <div class="nav-header">
          <span>
            <i class="el-icon-s-unfold" style="transform: rotate(90deg)" @click="direction(false)" v-if="cickFlag"></i>
            <i class="el-icon-s-unfold" v-else @click="direction(true)"></i>
          </span>
          <span>
            <i class="el-icon-close" @click="showPopover = false"></i>
          </span>
        </div>
        <div class="conntent">
          <menupersonnel :clickflag="cickFlag" :mylistmenu="mylistmenu" @ongetUrl="ongetUrl" />
        </div>
      </el-popover>
    </template>

    <el-menu-item :class="{ itemStyleBack: islBack }" :index="items.request" v-else @click="getThisPageActionId(items)">
      <div class="navContent">
        <i class="iconfont" v-html="items.iconcls"></i>
        <span slot="title" class="navWords">{{ items.name }}</span>
      </div>
    </el-menu-item>
  </div>
</template>
<script>
import { mapState } from "vuex";
import menupersonnel from "./menupersonnel.vue";
import webUrl from "@/config/otherLink";
export default {
  name: "sideMeunItem",
  components: {
    menupersonnel,
  },
  props: ["items"],
  data() {
    return {
      showPopover: false,
      mylistmenu: [],
      //invoiceUrl: process.env.NODE_ENV == "prod" ? "https://pgj.yundaizhang.com.cn:55003" : process.env.NODE_ENV == "newProd" ? "https://invoice.zhangsanfeng.vip" : "http://8.142.139.164:55003"
      invoiceUrl: webUrl.invoice,
    };
  },
  computed: {
    ...mapState({
      islBack: (state) => state.common.islBack,
      cickFlag: (state) => state.common.cickFlag,
      uif: (state) => state.common.uif,
      PermissionTree: (state) => state.common.PermissionTree,
    }),
  },
  mounted() {},
  methods: {
    getThisPageActionId(navItem) {
      if (navItem.name == "发票管理") {
        window.open(this.invoiceUrl + `?enterpriseToken=${this.uif.substring(7, this.uif.length)}`);
        return;
      }
      if (!navItem.request) {
        this.$message({ message: `暂无${navItem.name}权限`, type: "warning" });
        return;
      }
      this.$store.dispatch("GetActionId", navItem.id);
    },
    direction(status) {
      this.$store.commit("SET_CLFLAG", status);
    },
    ongetUrl(navItem) {
      this.showPopover = false;
      if (!navItem.request) {
        this.$message({ message: `暂无${navItem.name}权限`, type: "warning" });
        return;
      }

      this.$router.push(`${navItem.request}`);
      this.$store.dispatch("GetActionId", navItem.id + "");
    },
    onshow(items) {
      this.$store.dispatch("GetActionId", items.id);
      if (items.name == "人力资源") {
        this.mylistmenu = items.Children;
      } else {
        this.mylistmenu = [{ ...items }];
      }
    },
  },
};
</script>
<style lang="less">
.el-menu--collapse > div > .el-submenu > .el-submenu__title span {
  height: 0;
  width: 0;
  overflow: hidden;
  visibility: hidden;
  display: inline-block;
}

.el-menu--collapse > div > .el-submenu > .el-submenu__title .el-submenu__icon-arrow {
  display: none;
}

.itemStyleBack {
  background-color: #455066;
  color: #d6ddec;

  &:hover {
    background: #333f57 !important;
    color: #3aadf6 !important;
  }
}

.itemStyleBack.is-active {
  color: #3aadf6 !important;
}

.itStyleBack {
  li {
    .el-submenu__title {
      background-color: #455066;

      .navWords {
        color: #d6ddec;
      }
    }
  }

  &:hover {
    li {
      .el-submenu__title {
        background: #333f57 !important;

        .navWords {
          color: #3aadf6 !important;
        }
      }
    }
  }
}

.el-menu--vertical {
  // z-index: 999999999999 !important;
}

.down-popover {
  padding-bottom: 20px;
  left: 132px !important;
  border-top: 6px solid #39a2ed;
  box-shadow: 8px 8px 10px 0px #eee;
}

.mxsyle {
  text-align: center;
  color: #d6ddec;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;

  &:hover {
    background: #333f57 !important;
    color: #3aadf6 !important;
  }
  cursor: pointer;
  i {
    font-size: 32px;
  }
}
.mxsyleless {
  text-align: center;
  color: #303133;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;

  &:hover {
    background: rgb(236, 245, 255) !important;
    // color: #3aadf6 !important;
  }
  cursor: pointer;
  i {
    font-size: 32px;
  }
}

.conntent {
  width: 100%;
  height: 100%;

  overflow-y: auto;
}
.nav-header {
  top: 0px;
  height: 30px;
  line-height: 30px;
  text-align: right;
  i {
    cursor: pointer;
    font-size: 18px;
    color: #ababab;
    margin-right: 6px;
  }
}
</style>
